<template>
  <div class="cinema-detail">
    <div class="changeTop">
    <nav-bar class="nav-border">
      <p slot="left" class="titleLeft" @click="goBack">
        <img src="~assets/img/zuojiantou.png" alt=""  class="backImg"/>
         <p slot="center" v-show="!cinemaTagsIsShow">{{ cinemaInfo.name }}</p>
      </p>
    </nav-bar>
     <film-info :ietmFilmInfo="ietmFilmInfo" v-show="filmInfoIsShow"  class="changeFilm"/>
    </div>
    <!-- 这个changeWrapper样式 用来控制overflow是否为溢出隐藏 -->
    <scroll class="detail-scroll" ref="scroll" 
    :probeType="3" 
    @scroll="scrollPosition" 
    :class="{'changeWrapper':cinemaTagsIsShow}">
      <nav-bar class="nav-border" ref="offsetTopNav">
        <p slot="center">{{ cinemaInfo.name }}</p>
      </nav-bar>
    <cinema-tags :services="cinemaInfo.services"  @click.native="tagsClick" v-show="cinemaTagsIsShow" ref="tags"/>
  <cinema-address :address="cinemaInfo.address"/>
 
  <div class="schedule-wrap">
    <!-- 背景图片 -->
    <div class="bgImg" >
      <div class="img" ref="swiperBg"></div>
    </div>
    <!-- ============== -->
      <swiper-l class="swiper" >
     <div class="swiper-slide" v-for="item in cinemaFilms" :key="item.filmId">
       <img :src="item.poster" alt="" @load="imgLoad">
     </div>
  </swiper-l>
    <div v-if="cinemaFilms[bgIndex]">
  <film-info :ietmFilmInfo="ietmFilmInfo" ref="offsetTopFilmInfo"/>
  <banner-time  :showDate="ietmFilmInfo.showDate" @getPlayDate="getPlayDate" ref="tabsBar"/>
    <schedules-list :filmsSchedules="filmsSchedules"  v-if="filmsSchedules.length"/>
    <no-games v-else class="no-game" :NoGamesiSShow="NoGamesiSShow"/>
    </div>
    <no-games v-else :NoGamesiSShow="NoGamesiSShow"/>
  </div>
    </scroll>
    <!-- 遮盖层 -->
    <convering v-show="isConverShow">
      <nav-bar class="nav-border">
        <p slot="left" class="titleLeft cross" @click="hide">
          <img src="~assets/img/chahao.png" alt="" />
          <p slot="center" v-show="false">{{ cinemaInfo.name }}</p>
        </p>
      </nav-bar>
    <nav-bar class="nav-border">
      <p slot="center">{{ cinemaInfo.name }}</p>
    </nav-bar>
      <service-info :services="cinemaInfo.services"  ref="maxHeight" class="resetHeight" :style="changeHeight"></service-info>
    </convering >
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import Swiper from 'swiper'
import { cinemaInfo, cinemaShowFilm, scheduleList } from '@/network/cinema'
import { VueDebounce } from '@/common/utils'

import Scroll from 'components/common/scroll/Scroll.vue'
import SwiperL from 'components/common/swiper/SwiperL.vue'
import Convering from 'components/content/covering/Convering.vue'

import NoGames from './detailChildren/NoGames.vue'
import FilmInfo from './detailChildren/FilmInfo.vue'
import BannerTime from './detailChildren/BannerTime.vue'
import SchedulesList from './detailChildren/SchedulesList.vue'
import CinemaTags from './detailChildren/CinemaTags.vue'
import ServiceInfo from './detailChildren/ServiceInfo.vue'
import CinemaAddress from './detailChildren/CinemaAddress.vue'
export default {
  components: {
    CinemaTags,
    Convering,
    ServiceInfo,
    CinemaAddress,
    SwiperL,
    FilmInfo,
    BannerTime,
    SchedulesList,
    Scroll,
    NoGames
  },
  name: 'CinemaDetail',
  data() {
    return {
      cinemaInfo: {},
      cinemaFilms: [],
      isConverShow: false,
      boxHeight: 0,
      mySwiper: {},
      // 当前选择的电影
      ietmFilmInfo: {},
      //时间戳数组的下标
      dateCurrentIndex: 0,
      filmsSchedules: [],
      cinemaTagsIsShow: true,
      filmInfoIsShow: false,
      //控制返回是否执行防抖函数的
      flag: true,
      //轮播图切换的图标
      bgIndex: 0,
      NoGamesiSShow: false
    }
  },
  created() {
    this.tabBarHide()
    let _this = this //注意！一定要重新定义一下this指向
    //网路请求相关
    this.$http.all([_this.getCinemaInfo(), _this.getCinemaShowFilm()]).then(
      _this.$http.spread(function (res1, res2) {
        const { data: msg1 } = res1
        const { data: msg2 } = res2
        _this.cinemaInfo = msg1.cinema
        _this.cinemaFilms = msg2.films
        // 显示场次
        if (_this.cinemaFilms.length > 0 && Object.keys(_this.cinemaInfo)) {
          _this.getScheduleList(0, 0)
        } else {
          _this.showNoGames()
        }
      })
    )
  },
  methods: {
    ...mapMutations(['tabBarShow', 'tabBarHide']),
    //网路请求相关
    async getCinemaInfo() {
      return await cinemaInfo(this.$route.params.id)
    },
    async getCinemaShowFilm() {
      return await cinemaShowFilm(this.$route.params.id)
    },
    async getScheduleList(index, currentIndex) {
      const { data: res } = await scheduleList(
        this.cinemaFilms[index].showDate[currentIndex],
        this.cinemaFilms[index].filmId,
        this.cinemaInfo.cinemaId
      )
      if (res) this.filmsSchedules = res.schedules
      this.ietmFilmInfo = this.cinemaFilms[index]
      this.swiperbackgroundImg = this.cinemaFilms[index].poster
      this.showNoGames()
    },
    goBack() {
      this.$router.back()
      this.flag = false
    },
    tagsClick() {
      this.isConverShow = true
      // 0.5S 后获得盒子的高度
      setTimeout(() => {
        this.boxHeight = this.$refs.maxHeight.getHeight()
      }, 200)
    },
    hide() {
      // 遮盖层隐藏 高度还原为0
      this.isConverShow = false
      this.boxHeight = 0
    },
    initialize() {
      let _this = this
      if (this.flag) {
        this.mySwiper = new Swiper('.swiper-container', {
          slidesPerView: 4,
          spaceBetween: 16,
          centeredSlides: true,
          on: {
            // 监听图片完成切换的事件
            slideChangeTransitionEnd() {
              _this.bgIndex = this.realIndex
              // 拿到的下标
              _this.ietmFilmInfo = _this.cinemaFilms[this.realIndex]
              //拿到这个轮播图的背景属性
              // console.log(this.$refs.swiperBg.$el.style.background="red")
              _this.swiperbackgroundImg = _this.cinemaFilms[this.realIndex].poster

              //获取当前时间零点的时间戳
              // const timestamp = new Date(new Date().toLocaleDateString()).getTime() / 1000 + ''
              //请求上映的信息
              _this.$refs.tabsBar.currentIndex = 0
              _this.getScheduleList(this.realIndex, _this.dateCurrentIndex)

              // 图片切换完成也要刷新高度
              _this.$refs.scroll.refresh()
              //重置滚动高度
              _this.$refs.scroll.scrollTo(0, 0, 0)
              _this.cinemaTagsIsShow = true
              _this.filmInfoIsShow = false
            }
          }
        })

        // 刷新scroll的高度
        this.$refs.scroll.refresh()
      }
    },

    // 监听图片加载完成的事件
    imgLoad: VueDebounce('initialize', 100),

    //接收bannertime传过来的ul下标
    getPlayDate(currentIndex) {
      this.getScheduleList(this.bgIndex, currentIndex)
    },
    // 监听scroll的滚动事件
    scrollPosition({ y }) {
      // console.log(this.$refs.offsetTopNav.$el.offsetHeight, 'nav高度')
      // console.log(y, '滚动的距离')
      // console.log(this.$refs.offsetTopFilmInfo.$el.getBoundingClientRect().top, '到顶部的距离')
      // console.log(this.distanceToTop)

      this.cinemaTagsIsShow = this.navHeight < -y ? false : true
      this.filmInfoIsShow = this.distanceToTop < -y ? true : false
    },
    // 监听场次图片是否出现
    showNoGames() {
      this.NoGamesiSShow = true
    }
  },
  computed: {
    // 遮罩层的高度计算
    changeHeight() {
      return this.isConverShow ? { height: this.boxHeight + 10 + 'px' } : 0
    },
    // swiper的背景
    swiperbackgroundImg: {
      get() {
        if (this.$refs.swiperBg) {
          return this.$refs.swiperBg.style.backgroundImage
        }
      },
      set(value) {
        this.$refs.swiperBg.style.backgroundImage = `url('${value}')`
      }
    },
    // nav的高度计算
    navHeight() {
      return this.$refs.offsetTopNav.$el.offsetHeight
    },
    //滚动到FilmInfo需要的距离
    distanceToTop() {
      return (
        this.$refs.offsetTopFilmInfo.$el.getBoundingClientRect().top -
        this.$refs.offsetTopNav.$el.offsetHeight -
        this.$refs.tags.$el.offsetHeight
      )
    }
  },
  beforeDestroy() {
    this.tabBarShow()
  }
}
</script>

<style lang="scss" scoped>
.cinema-detail {
  height: 100vh;
  width: 100vw;
  background: #fff;
  overflow: hidden;
}
.resetHeight {
  overflow: hidden;
  transition: all 0.6s;
}
.titleLeft {
  img {
    height: 0.3rem;
    width: 0.3rem;
  }
}
::v-deep .nav-border {
  border: none;
}
.cross {
  img {
    height: 0.19rem !important;
    width: 0.19rem !important;
  }
}
.schedule-wrap {
  position: relative;
  width: 100vw;
  .bgImg {
    position: absolute;
    height: 1.6rem;
    width: 100%;
    padding: 0.15rem 0;
    top: 0;
    overflow: hidden;
    .img {
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      -webkit-filter: blur(30px);
      -moz-filter: blur(30px);
      -o-filter: blur(30px);
      -ms-filter: blur(30px);
      filter: blur(30px);
    }
  }
  .swiper {
    width: 100%;
    padding: 0.15rem 0;
    margin-left: auto;
    margin-right: auto;
  }
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 800ms;
  transform: scale(0.8);
  height: 100%;

  img {
    height: 1.3rem;
    width: 0.9rem;
  }
}
::v-deep .swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
.detail-scroll {
  height: calc(100% - 0.44rem);
}
.backImg {
  position: relative;
  z-index: 100;
}
.changeWrapper {
  overflow: visible;
}
.changeFilm {
  position: absolute;
  z-index: 100;
}
.test {
  display: block;
}
.banner {
  display: flex;
  height: 0.4rem;
  overflow-x: auto;
  li {
    flex-shrink: 0;
  }
}
.no-game {
  height: 20vh;
}
</style>